<template>
	<div class="pay-method-con">
		<el-form labelPosition="right" label-width="180px" :model="form" class="quane-pay" :rules="rules" ref="form">
			<el-form-item label="支付方式：">
				<el-radio-group v-model="form.paymentMethod" :disabled="!canSubmit">
					<el-radio label="3">现金</el-radio>
					<el-radio label="4">刷卡</el-radio>
					<el-radio label="1">支付宝</el-radio>
					<el-radio label="2">微信</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="总金额：" prop="totalAmount">
				<el-input class="pay-method-ipt total padding-right" v-model="form.totalAmount" :maxlength="5" :readonly="!canSubmit"></el-input>
			</el-form-item>
			<el-form-item label="包库教练员：">
				<el-select class="pay-method-ipt" v-model="form.clerkBh" placeholder="请选择包库教练员..." :disabled="!canSubmit">
					<el-option v-for="item in teachers" :key="item.teacherId" :label="item.name+'['+item.idcard+']'" :value="item.teacherId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注：" prop="remark">
				<el-input type="textarea" class="pay-method-ipt" v-model="form.remark" :readonly="!canSubmit"></el-input>
			</el-form-item>
			<input type="button" class="submit-btn" v-if="canSubmit" @click="submit" value="提   交">
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "tab-three",
		props: ['teachers', 'stuData'],
		data() {
			return {
				canSubmit: true,
				form: {
					paymentMethod: '3',
					totalAmount: '',
					clerkBh: '',
					clerkName: '',
					remark: ''
				},
				rules: {
					totalAmount: [{
							required: true,
							message: "请输入总金额！",
							trigger: "blur"
						},
						{
							max: 5,
							message: "最大长度 5 个字符",
							trigger: "blur"
						}
					],
					remark: [{
						max: 200,
						message: "最大长度 200 个字符",
						trigger: "blur"
					}]
				}
			}
		},
		watch: {
			'form.clerkBh': function(val, old) {
				let _tea = this.teachers.filter((e) => {
					return e.teacherId == val;
				});

				if(_tea.length > 0) {
					this.form.clerkName = _tea[0].name + '[' + _tea[0].idcard + ']';
				} else {
					this.form.clerkName = '';
				}
			},
			stuData: function(stu) {
				if(stu.pbh) {
					this.canSubmit = false;
					this.form.paymentMethod = stu.paymentMethod;
					this.form.totalAmount = stu.totalAmount;
					this.form.clerkBh = stu.clerkBh;
					this.form.remark = stu.remark;
				} else {
					Object.assign(this.$data, this.$options.data());
					this.$nextTick(() => {
						this.$refs.form.clearValidate();
					});
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate(valid => {
					if(!valid) {
						return false;
					}
					this.$emit('confirm', this.form);
				});
			}
		}
	}
</script>

<style>

</style>